import React from 'react';
import LayoutContentWrapper from '@iso/components/utility/layoutWrapper';
import LayoutContent from '@iso/components/utility/layoutContent';
import axios from "@iso/http";
import Card from "@iso/containers/UIElements/Card/Card.styles";
import Button from '@iso/components/uielements/button';
import Qs from 'qs'
import {
    DateCell,
    ImageCell,
    LinkCell,
    TextCell,
} from '@iso/components/Tables/HelperCells';

import TableWrapper from "@iso/containers/Tables/AntTables/AntTables.styles";
import {Col, Row, Space} from "antd";
import PopconfirmWrapper from "@iso/containers/Feedback/Popconfirm/Popconfirm.styles";
import Popconfirms from '@iso/components/Feedback/Popconfirm';

import PageHeader from '@iso/components/utility/pageHeader';
import Input from '@iso/components/uielements/input';
import {InputGroup} from "@iso/components/uielements/input";
import {Link} from "react-router-dom";
import Modals from '@iso/components/Feedback/Modal';
import ModalStyle from "@iso/containers/Feedback/Modal/Modal.styles";
import WithDirection from '@iso/lib/helpers/rtl';

const isoModal = ModalStyle(Modals);
const Modal = WithDirection(isoModal);


const Popconfirm = (props) => (
    <PopconfirmWrapper>
        <Popconfirms {...props} />
    </PopconfirmWrapper>
);



export default class NoticeMine extends React.Component {


    constructor(props) {

        super(props);

        this.state={dataList:[], title:'',shareLink:'',modalVisible:false};

    }


     renderCell = (object, type, key) => {
        const value = object[key];
        switch (type) {
            case 'ImageCell':
                return ImageCell(value);
            case 'DateCell':
                return DateCell(value);
            case 'LinkCell':
                return LinkCell(value);
            default:
                return TextCell(value);
        }
    };



    onRecordChange = (event, key) => {
        let state={};
        state[key]=event.target.value;
        this.setState(state)
    };
    loadData(page){
        axios.post('api/core/notice/findMineByPage', Qs.stringify({
            page: page-1,
            size: 10,
            title:this.state.title
        }),{headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
            .then((response)=>{

                let  data=response.data

                let  dataList=data.data.content;

                let totalElements=data.data.totalElements;

                this.setState({dataList:dataList,totalElements:totalElements});
            })
            .catch(function (error) {
                console.log(error);
            });

    }




   componentDidMount() {
        this.loadData(1)
   }



    getColumns(){
        const columns = [ {
            title: 'ID',
            key: 'id',
            width: 100,
            render: object => this.renderCell(object, 'TextCell', 'id'),
        },{
            title: '标题',
            key: 'name',
            width: 100,
            render: object => this.renderCell(object, 'TextCell', 'title'),
        },{
            title: '发布时间',
            key: 'publishedTime',
            width: 100,
            render: object => this.renderCell(object, 'TextCell', 'publishedTime'),
        },{
            title: '已读人数',
            key: 'readerCount',
            width: 100,
            render: object => this.renderCell(object, 'TextCell', 'readerCount'),
        },{
            title: '操作',
            width: 100,
            render:(text,record) => (

                <Space size="middle">
                    <Link to={{pathname:'/main/core/notice/view/'+record.publishedCode,state:{publishedCode:record.publishedCode}}} >
                        <Button type="primary" size='small'>查看</Button>
                    </Link>
                </Space>

            )
        }];

        const sortColumns = [
            { ...columns[0], sorter: false },
            { ...columns[1], sorter: false },
            { ...columns[2], sorter: false },
            { ...columns[3], sorter: false },
            { ...columns[4], sorter: false }
        ];
        return sortColumns;
    }

    getPagination(){
      let pagination= {
        showSizeChanger: false,//设置每页显示数据条数
        showQuickJumper: false,
        showTotal: () => `共${this.state.totalElements}条`,
        pageSize: 10,
          //数据的总的条数
        total: this.state.totalElements,
          //点击当前页码
        onChange: (current) => this.loadData(current),
          //设置每页显示数据条数，current表示当前页码，pageSize表示每页展示数据条数
        onShowSizeChange: (current, pageSize) => {
            console.log(pageSize);
            //this.onShowSizeChange(current, pageSize)
        }

     }
     return pagination;
    }


    handleCancel = () => {
        this.setState({modalVisible:false})
    };

    render() {
    return (
      <LayoutContentWrapper >
          <PageHeader>
              我的通知
          </PageHeader>
        <LayoutContent>

            <Card
                title='查询条件'
                style={{ width: '100%' }}
            >

                <InputGroup size="large" style={{ marginBottom: '15px' }}>
                    <Row gutter={8}>
                        <Col span={3}>
                            <Input placeholder='标题' onChange={e => this.onRecordChange(e, 'title')} />
                        </Col>

                        <Col span={3}>
                            <Button type="primary" size='small' onClick={()=>{this.loadData(1)}}>
                                查询
                            </Button>
                        </Col>
                    </Row>
                </InputGroup>


            </Card>

            <Card
                title='查询结果'
                style={{ width: '100%' }}
            >

                <TableWrapper
                    columns={this.getColumns()}
                    dataSource={this.state.dataList}
                    className="isoSortingTable"
                    pagination={this.getPagination()}
                />

            </Card>
        </LayoutContent>
      </LayoutContentWrapper>
    );
  }
}
